<template>
  <el-dialog
    :title="showTitle"
    :visible="showDialog"
    width="600px"
    :close-on-click-modal="false"
    @close="closeDialogFn"
  >
    <!-- 表单 -->
    <el-form
      ref="form"
      v-loading="isLoading"
      :model="formData"
      :rules="rules"
      style="width:100%"
      label-width="140px"
    >
      <el-form-item
        label="车辆类型"
        prop="name"
      >
        <el-input
          v-model="formData.name"
          placeholder="请输入车辆类型"
        />
      </el-form-item>
      <el-form-item
        label="应载重量"
        prop="allowableLoad"
      >
        <el-input
          v-model="formData.allowableLoad"
          placeholder="请输入车型载重"
        >
          <span
            slot="suffix"
            style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
          >吨</span>
        </el-input>
      </el-form-item>
      <el-form-item
        label="应载体积"
        prop="allowableVolume"
      >
        <el-input
          v-model="formData.allowableVolume"
          placeholder="请输入车型体积"
        >
          <span
            slot="suffix"
            style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
          >立方</span></el-input>
      </el-form-item>
      <el-form-item
        label="长"
        prop="measureLong"
      >
        <el-input
          v-model="formData.measureLong"
          placeholder="请输入长"
        >
          <span
            slot="suffix"
            style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
          >米</span>
        </el-input>
      </el-form-item>
      <el-form-item
        label="宽"
        prop="measureWidth"
      >
        <el-input
          v-model="formData.measureWidth"
          placeholder="请输入宽"
        >
          <span
            slot="suffix"
            style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
          >米</span>
        </el-input>
      </el-form-item>
      <el-form-item
        label="高"
        prop="measureHigh"
      >
        <el-input
          v-model="formData.measureHigh"
          placeholder="请输入高"
        >
          <span
            slot="suffix"
            style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
          >米</span>
        </el-input>
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template #footer>
      <div
        style="text-align: center"
      >
        <el-button
          type="danger"
          @click="submitFn"
        > 确定 </el-button>
        <el-button @click="closeDialogFn">取消</el-button>
      </div>

    </template>
  </el-dialog>
</template>
<script>
import { add, update } from '@/api/transit'
import { Message } from 'element-ui'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isLoading: false, // 确定按钮loading
      formData: {
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        measureHigh: (0.0).toFixed(1),
        measureLong: (0.0).toFixed(1),
        measureWidth: (0.0).toFixed(1)
      },
      rules: {
        name: [
          {
            required: true,
            message: '车辆类型不能为空',
            trigger: ['blur']
          }

        ],
        allowableLoad: [
          {
            required: true,
            message: '应载重量不能为空',
            trigger: ['blur']
          },
          { pattern: /^([1-9][0-9]{0,1}|100)$/, message: '只能输入1-100之间的正整数,请重新输入', trigger: 'blur' }
        ],
        allowableVolume: [
          {
            required: true,
            message: '应载体积不能为空',
            trigger: ['blur']
          },
          { pattern: /^([1-9][0-9]{0,1}|100)$/, message: '只能输入1-100之间的正整数,请重新输入' }
        ],
        measureLong: [
          { pattern: /^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/, message: '只能输入数字类型，最多保留两位小数，请重新输入', trigger: 'blur' }
        ],
        measureWidth: [
          { pattern: /^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/, message: '只能输入数字类型，最多保留两位小数，请重新输入' }
        ],
        measureHigh: [
          { pattern: /^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/, message: '只能输入数字类型，最多保留两位小数，请重新输入' }
        ]
      }
    }
  },
  computed: {
    showTitle() {
      if (this.formData.id) {
        return '编辑车型'
      } else {
        return '新增车型'
      }
    }
  },

  methods: {
    // 关闭弹层
    closeDialogFn() {
      this.$emit('update:showDialog', false)
      this.formData = {
        name: null,
        allowableLoad: null,
        allowableVolume: null,
        measureHigh: (0.0).toFixed(1),
        measureLong: (0.0).toFixed(1),
        measureWidth: (0.0).toFixed(1)
      }
      this.$refs.form.resetFields()
    },

    // 确定按钮
    async submitFn() {
      this.$refs.form.validate(async(flag) => {
        if (!flag) {
          this.$message.error('*号为必填项')
          return
        }
        this.isLoading = true
        if (this.formData.id) {
        // 编辑接口
          const res = await update(this.formData.id, this.formData)
          if (res.code === 200) {
            this.$message.success('操作成功')
          } else {
            Message.error(res.msg)
          }
        } else {
        // 添加接口
          const res = await add(this.formData)
          if (res.code === 200) {
            this.$message.success('添加成功')
          } else {
            Message.error(res.msg)
          }
        }
        this.isLoading = true
        //   关闭弹窗，清空表单，清空校验
        this.closeDialogFn()
        // 添加成功，从新渲染角色列表
        this.$parent.getList()
        this.isLoading = false
      })
    }
  }
}
</script>
